import React from "react";
import { Layout } from "antd";
import { useGlobalStore } from "@/store/global";
import { useShallow } from "zustand/react/shallow";

const { Footer } = Layout;

const LayoutFooter: React.FC = () => {
  const { footer } = useGlobalStore(useShallow((state) => ({ footer: state.footer })));

  return (
    <div
      className="[&_.ant-layout-footer]:flex! [&_.ant-layout-footer]:justify-center! [&_.ant-layout-footer]:items-center! [&_.ant-layout-footer]:h-[30px]!
    [&_.ant-layout-footer]:p-[0]! [&_.ant-layout-footer]:bg-[var(--el-color-colorBgContainer)]! [&_.ant-layout-footer]:border-t-[1px]! [&_.ant-layout-footer]:border-solid!
    [&_.ant-layout-footer]:border-[var(--el-color-colorBorderSecondary)]!"
    >
      {footer && (
        <Footer>
          <a href="#" target="_blank" rel="noreferrer" className="font-[14px]! text-[#858585]! text-decoration-none! whitespace-nowrap!">
            {import.meta.env.VITE_APP_BOTTOM_INFORMATION}
          </a>
        </Footer>
      )}
    </div>
  );
};

export default LayoutFooter;
